<template>
  <div style="display: flex;height: 70px;line-height: 70px">

    <h1 style="padding-left: 15px;width: 600px;padding-bottom: 20px; color: #409EFF">欢迎使用选课系统🥰</h1>

    <div style="flex: 1"></div>

    <div style="width: 310px;display: flex;">

      <div style="color: red;">{{ nowTime }}&nbsp;&nbsp;</div>


      <router-link style="text-decoration: none;color: white" to="/login">

        <el-button v-if="userName ==null" to="" type="danger">请登录

        </el-button>

      </router-link>


    </div>

    <div v-if="userName !=null" style="margin-top: 12px;margin-right: 10px">

      <el-avatar v-if="user.roleId==1" :src="require('../assets/img/user.png')"></el-avatar>

      <el-avatar v-else-if="user.roleId==2" :src="require('../assets/img/teacher.png')"></el-avatar>

      <el-avatar v-else-if="user.roleId==3" :src="require('../assets/img/admin.png')"></el-avatar>

    </div>

    <div v-if="userName !=null" style="width: 90px">

      <el-dropdown @command="handleCommand">



                <span class="el-dropdown-link" style="font-size: 15px">

       {{ userName }}<i class="el-icon-arrow-down el-icon--right"></i>

      </span>

        <el-dropdown-menu slot="dropdown">

          <el-dropdown-item>

            <router-link style="text-decoration: none" to="/personalcenter">个人中心</router-link>

          </el-dropdown-item>

          <el-dropdown-item divided>

            <router-link style="text-decoration: none" to="/login" type="danger">

              <div @click="getOut">退出</div>

            </router-link>

          </el-dropdown-item>

          <!--          <el-dropdown-item disabled>这是什么</el-dropdown-item>-->

        </el-dropdown-menu>

      </el-dropdown>

    </div>

  </div>
</template>

<style>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>
<script>
export default {
  name: 'Header',
  components: {},
  props: {
    userName: String,
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  mounted() {
    this.getTime();
  },


  methods: {
    getOut() {
      localStorage.clear();
    },
    getTime() {
      this.timer = setInterval(() => {
        let timeDate = new Date();
        let year = timeDate.getFullYear();
        let mounth = timeDate.getMonth() + 1;
        let day = timeDate.getDate();
        let hours = timeDate.getHours();
        hours = hours >= 10 ? hours : "0" + hours;
        let minutes = timeDate.getMinutes();
        minutes = minutes >= 10 ? minutes : "0" + minutes;
        let seconds = timeDate.getSeconds();
        seconds = seconds >= 10 ? seconds : "0" + seconds;
        let week = timeDate.getDay();
        let weekArr = [
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
        ];

        this.nowTime = `${year}/${mounth}/${day} ${hours}:${minutes}:${seconds} ${weekArr[week]}`
      }, 1);
    },
  },
  data() {
    return {
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      timer: "", //定义一个定时器
      nowTime: "",
    }
  }
}
</script>
